<template>

    <div class="app" :style="contentArea" @lifecycle="lifecycle">

        <navbar class="page-navbar" :eeui="{backgroundColor:'#FFFFFF'}">
            <navbar-item type="title">
                <text class="page-navbar-title">Me</text>
            </navbar-item>
            
        </navbar>
        <div class="page-content">
            <div class="MeHeadWrp">
              <div class="MeHeadLeftWrp">
                <image class="heanIcon" src="./assets/head.png"></image>
              </div>
              <div class="MeHeadRightWrp">
                <text class="MeName">No.18</text>
                <text class="MeNum">15222520930‬</text>
                <!-- <text class="MeNum">150*****763</text> -->
              </div>
            </div>
            <div class="placeWrp"></div>
            <div class="funListWrp">
              <!-- <div class="funItemWrp">
                <div class="ItemLeftWrp">
                  <text class="chinahandfont iconL">&#xe683;</text>
                  <text class="chinahandfont iconTxt">RMB Wallet</text>
                </div>
                 <text class="chinahandfont iconRf">&#xe699;</text>
              </div> -->
              <div class="funItemWrp" @click="goAbout()">
                <div class="ItemLeftWrp">
                  <text class="chinahandfont iconL">&#xe676;</text>
                  <text class="chinahandfont iconTxt">About us</text>
                </div>
                 <text class="chinahandfont iconRf">&#xe699;</text>
              </div>
              <div class="funItemWrp" @click="goGuidance()">
                <div class="ItemLeftWrp">
                  <text class="chinahandfont iconL">&#xe69f;</text>
                  <text class="chinahandfont iconTxt">User's guidance</text>
                </div>
                 <text class="chinahandfont iconRf">&#xe699;</text>
              </div>
            </div>
            <!-- <div class="logoutWrp">
              <div class="logoutBtn" @click="goLogin()">
                <text class="logoutTxt">Logout</text>
              </div>
            </div> -->
        </div>
    </div>

</template>

<style scoped>

   
    .chinahandfont {
        font-family: chinahandfont;
    }

    .app {
      /* padding-bottom: 188px; */
        /* flex: 1; */
        
        /* background-color: #ffffff; */
        /* background-color: #e90101; */
    }

    .iconr {
        width: 66px;
        height: 66px;
        color: #000000;
        /* background-color: #000000; */
        margin-top: 26px;
    }

    .page-content {
        width: 750px;
        /* padding-top: 200px; */
        align-items: center;
        /* background-color: #efefef; */
    }

    .content-text {
        font-size: 24px;
    }

    .page-navbar {
        width: 750px;
        height: 90px;
        background-color: #ffffff;

    }

    .page-navbar-title {
        /* color: #ffffff; */
        font-size: 32px;
        font-weight: bold;
	      color: #222222;
    }

    .page-content-image {
        width: 480px;
        height: 480px;
        margin-top: 30px;
        margin-bottom: 30px;
    }

    .MeHeadWrp {
        width: 750px;
        height: 205px;
        background-color: #ffffff;
        flex-direction: row;
        align-items: center;
        border-top-style: solid;
        border-top-width: 1px;
        border-top-color: #d5d5d5;
    }

    .MeHeadLeftWrp {
      width: 153px;
      height: 153px;
      background-color: #eeeeee;
      border-style: solid;
      border-width: 1px;
      border-color: #d5d5d5;
      border-radius: 77px;
      margin-left: 36px;
      margin-right: 47px;
    }
    .heanIcon {
      width: 153px;
      height: 153px;
      border-radius: 77px;
    }

    .MeName {
      /* width: 152px;
      height: 26px; */
      font-size: 34px;
      font-weight: normal;
      line-height: 45px;
      color: #333333;
    }

    .MeNum {
      /* width: 155px;
      height: 19px; */
      font-size: 24px;
      font-weight: normal;
      line-height: 45px;
      color: #333333;
    }

    .placeWrp {
      background-color: #efefef;
      width: 750px;
      height: 20px;
    }

    .funListWrp {
      width: 750px;
      height: 200px;
      flex-direction: column;
      align-items: center;
    }

    .funItemWrp {
      width: 678px;
      height: 99px;
      border-bottom-style: solid;
      border-bottom-width: 1px;
      border-bottom-color: #d5d5d5;
      flex-direction: row;
      justify-content: space-between;
      align-items: center;
    }

    .ItemLeftWrp {
      flex-direction: row;
      align-items: center;
      
    }

    .iconL {
      font-size: 47px;
      color: #d42e12;
      margin-right: 33px;
    }

    .iconTxt {
      height: 98px;
      line-height: 98px;
      font-size: 30px;
	    color: #222222;
    }

    .iconRf {
      font-size: 20px;
      color: #666666;
    }

    .logoutWrp {
      width: 750px;
      height: 80px;
      flex-direction: row;
      justify-content: center;
      align-items: center;
      margin-top: 140px;
    }

    .logoutBtn {
      width: 678px;
      height: 80px;
      background-color: #c8331c;
      border-radius: 5px;
      flex-direction: row;
      justify-content: center;
      align-items: center;
    }

    .logoutTxt {
      font-size: 36px;
      color: #f1f1f1;
    }

</style>
<script>
    import { WxcEpSlider } from 'weex-ui';
    const eeui = app.requireModule('eeui');

    export default {
        props: {
            statusBar: {
                type: [String, Number],
                default: 0
            },
            contentArea: {
              type: [String, Object],
              default: {height: "600px"}
            },
            contentHeight: {
              type: [String, Number],
              default: 1334
            },
        },
        components: { WxcEpSlider },
        data() {
            return {
                title: 'Hello, World!',
                desc: 'Hello, World!  Hello, EEUI! ',
                sliderId: 1,
                cardLength: 5,
                cardSize: {
                  width: 579,
                  height: 264,
                  spacing: 0,
                  scale: 0.8
                },
                lists: [],
                scrollHeight: 800
            }
        },

        mounted() {
          this.scrollHeight = this.contentHeight - 683;
        },

        // beforeCreate: function () {
        //     const domModule = app.requireModule('dom')
        //     domModule.addRule('fontFace', {
        //         'fontFamily': "chinahandfont",
        //         'src': "url('http://at.alicdn.com/t/font_1364538_cin699809qv.ttf')"
        //         // 'src': "url('local://eeui/pages/iconfont/chinahandfont.ttf')"
        //     });
        // },

        methods: {
            /**
             * 生命周期
             * @param res
             */
            lifecycle(res) {
                switch (res.status) {
                    case "ready":
                        //页面挂载(初始化)
                        break;

                    case "resume":
                        //页面激活(恢复)
                        break;

                    case "pause":
                        //页面失活(暂停)
                        break;
                }
            },

            /**
             * 打开新页面
             * @param jsPageName    (String)JS页面名称
             * @param params        (Object)传递参数
             */
            goForward(jsPageName, params) {
                eeui.openPage({
                    url: str + ".js",
                    pageType: "app",
                    statusBarColor: "#3EB4FF",
                    params: params ? params : {}
                });
            },

            /**
             * 返回上一页(关闭当前页)
             */
            goBack() {
                eeui.closePage();
            },
            viewCode(str) {
                this.openViewCode(str);
            },
            goLogin() {
              eeui.openPage({
                  pageName: 'Login',
                  pageType: 'app',
                  url: 'login.js'
              }, function(result) {
                  //......
              });

            },
            goAbout() {
              eeui.openPage({
                  pageName: 'About',
                  pageType: 'app',
                  statusBarStyle: false,
                  url: 'me/about.js'
              }, function(result) {
                  //......
              });

            },
            goGuidance() {
              eeui.openPage({
                  pageName: 'Guidance',
                  pageType: 'app',
                  statusBarStyle: false,
                  url: 'me/guidance.js'
              }, function(result) {
                  //......
              });

            }
            
        }
    }
</script>
